 /* 全局变量 */
 :root {
   /* 顶部标题栏的高度 */
   --min-top-title-height: 154px;
   --top-title-percent: 18.5%;

   /* 主要内容区域（标题栏以下）的高度 */
   --min-content-heigt: 570px;
   --content-height-percent: 81.5%;

   /* 主要背景色 */
   --main-background-color: #dddddd;

   /* 地图面板在主要内容区域的高度占比 */
   --map-panel-height-percent: 96.5%;

   /* 医院标记的颜色 */
   --hospital-marker-color: rgba(222, 125, 44, 0.99);

   /* 医院标记的“呼吸效果”的最大型号 */
   --circle-blob-max-length: 30px;
 }

 /* 默认取消全部的margin和padding */
 * {
   margin: 0px;
   padding: 0px;
 }

 /* 定义最小宽度（理论上，高度对布局没影响）*/
 body {
   height: 100%;
   position: absolute;
   width: 100%;
   overflow: auto;
   min-width: 800px;
 }

 /* 为左侧面板的三个子面板添加下边界 */
 #panel-hospital-query,
 #panel-dangerous-area,
 #panel-route-query {
   border: none;
   margin: 0;
   padding: 0;
   border-bottom: 1px solid rgba(10, 41, 107, 0.432);
   border-radius: 0px;
 }

 /* 令鼠标指针放在某按钮上出现的浮窗能够显示全部的文字 */
 .tooltip-inner {
   max-width: none;
   white-space: nowrap;
 }

 /* 页面顶部标题 */
 .top-title {
   width: 100%;
   height: var(--top-title-percent);
   background: #8cab6e;
   background-image: url('../img/head_background.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: left center;
   position: relative;
   min-height: var(--min-top-title-height);
 }

 /* 左侧面板 */
 .box {
   float: left;
   position: absolute;
   left: 0;
   height: 81.5%;
   width: 320px;
   margin-left: 0;
   display: block;
   transition: margin-left 2s;
   z-index: 100;
   min-height: var(--min-content-heigt);
 }

 /* 控制左侧面板移动的“花型”按钮 */
 .button-left-control-pane {
   position: relative;
   left: 320px;
   width: 70px;
   height: 100%;
   border: none;
   /* background-color: ; */
   background-image: url('../img/按钮-花.png');
   background-repeat: no-repeat;
   background-position-y: center;
   background-position-x: left;
   outline: none;
   z-index: 20000;
 }

 .button-left-control {
   position: relative;
   height: 160px;
   width: 100%;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   border: none;
   opacity: 0.0;
 }

 /* 核心div(页面最底层) */
 .core-div {
   position: relative;
   height: var(--content-height-percent);
   min-height: var(--min-content-heigt);
   background-color: var(--main-background-color);
 }

 /* 地图容器 */
 .map-panel {
   width: 100%;
   height: var(--map-panel-height-percent);
   background-color: var(--main-background-color);
 }

 /* 页面底部版权模块 */
 footer {
   width: 100%;
   height: calc(1 - var(--map-panel-height-percent));
   background-color: var(--main-background-color);
 }

 /* 左侧“毒气扩散区面板下的自定义圆形复选框” */
 .subpanel-dangerous-area {
   width: 100%;
   height: 50px;
 }

 .label-dangerous-area {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 0px;
   cursor: pointer;
   font-size: 18px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   width: 100%;
   height: 100%;
   line-height: 50px;
   text-align: center;
 }

 .label-dangerous-area input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }

 .checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 16px;
   width: 16px;
   margin-left: 43px;
   background-color: #eee;
   border-radius: 50%;
   transform: translateY(17px);
 }

 .label-dangerous-area:hover input~.checkmark {
   background-color: #ccc;
 }

 .label-dangerous-area input:checked~.checkmark {
   background-color: #2196F3;
 }

 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }

 .label-dangerous-area input:checked~.checkmark:after {
   display: block;
 }

 .label-dangerous-area .checkmark:after {
   top: 50%;
   left: 50%;
   width: 5px;
   height: 5px;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 50%;
   background: white;
 }

/* “毒气扩散区分析”面板下，“取消”按钮上的那条线 */
 #label-dangerous-area-cancel::after {
   content: '';
   width: 150px;
   height: 2px;
   background: rgba(10, 41, 107, 0.432);
   position: absolute;
   transform: translateX(-60%);
 }

 /* 医院选择下拉菜单 */
 #hospital-select-control {
   width: 100%;
   border-radius: 0px;
   border: 1px solid #ccc;
 }

 @keyframes shadowPulse {
   0% {
     box-shadow: 0px 0px 10px 0px rgba(218, 30, 86, 0.877);
   }

   100% {
     box-shadow: 0px 0px 5px 0px rgba(218, 30, 86, 0.0);
   }
 }

 .shadow-pulse {
   animation-name: shadowPulse;
   animation-duration: 1.2s;
   animation-iteration-count: 1;
   animation-timing-function: linear;
 }

 /* Placeholder for custom div icon */
 .css-icon {}

 /* 医院标记（呼吸效果） */
 .circle-blob {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   /* background-color: blueviolet; */
   position: relative;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%) scale(1);
   /* opacity: 0.8; */
   background: var(--hospital-marker-color);
   box-shadow: 0 0 0 0 var(--hospital-marker-color);
   animation: pulse-purple 2s infinite;
 }

 #blob-1 {}

 #blob-2 {}

 #blob-3 {}

 #blob-4 {}

 #blob-5 {}

 #blob-6 {}

 @keyframes pulse-purple {
   0% {
     transform: translateY(-50%) translateX(-50%) scale(0.9);
     box-shadow: 0 0 0 0 rgba(233, 59, 5, 0.7);
   }

   70% {
     transform: translateY(-50%) translateX(-50%) scale(1);
     box-shadow: 0 0 0 var(--circle-blob-max-length) rgba(233, 59, 5, 0);
   }

   100% {
     transform: translateY(-50%) translateX(-50%) scale(0.9);
     box-shadow: 0 0 0 0 rgba(233, 59, 5, 0);
   }
 }

 /* 危险区域标记（雷达效果） */
 .area {
   position: absolute;
   border-radius: 50%;
   border: none;
   background: transparent;
 }

 #area-1 {}

 #area-2 {}

 #area-3 {}

 #area-4 {}

 .sweep {
   position: absolute;
   box-sizing: border-box;
   /* top: -50%; left: -50%; */
   border-right: solid 1px hsla(145, 50%, 40%, .3);
   width: 108px;
   height: 108px;
   border-radius: 100% 0 0 0;
   transform-origin: 100% 100%;
   background: linear-gradient(50deg, rgba(34, 34, 34, 0) 56%, hsla(145, 50%, 40%, 1));
   animation: sweep 3s infinite linear;
 }

 @keyframes sweep {
   to {
     transform: rotate(360deg);
   }
 }

 /* 等待查询最短路径时出现的进度条 */
 .progress-line,
 .progress-line:before {
   height: 3px;
   width: 100%;
   margin: 0;
 }

 .progress-line {
   background-color: #b3d4fc;
   display: -webkit-flex;
   display: flex;
   position: relative;
   bottom: 10px;
 }

 .progress-line:before {
   background-color: #3f51b5;
   content: '';
   -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }

 @-webkit-keyframes running-progress {
   0% {
     margin-left: 0px;
     margin-right: 100%;
   }

   50% {
     margin-left: 25%;
     margin-right: 0%;
   }

   100% {
     margin-left: 100%;
     margin-right: 0;
   }
 }

 @keyframes running-progress {
   0% {
     margin-left: 0px;
     margin-right: 100%;
   }

   50% {
     margin-left: 25%;
     margin-right: 0%;
   }

   100% {
     margin-left: 100%;
     margin-right: 0;
   }
 }